{% load i18n %}
<script>
    $(document).ready(function() {
        //init_data_table()
        get_curr_market()
        //set_timer()
        init_tab_click()
    });

    function set_timer()
    {
        var market = setInterval(get_curr_market, 30000);
    }

    function get_curr_market(use_coin_type)
    {
        $.get("/btc/get_curr_market", {}, function(jsonobj){
            var data = jsonobj
            // 先初始化数据
            init_temp_data(data, use_coin_type)
            // 启用监听
            init_search(jsonobj)
        })
    }

    // 初始化模板数据
    function init_temp_data(jsonobj, use_coin_type) {
            console.log(jsonobj)
            var data = markets_left_pack_data(jsonobj, use_coin_type)
            var data = {
                jsonobj: data,
                g_coin_info: g_coin_info,
                use_coin_type : use_coin_type,
            }
            var html = template('temp_market_index', data);
            document.getElementById('market_index').innerHTML = html;
            // 监听排序等
    }

    // data 的数据是所有数据
    function init_search(data)
    {
        $("#search").keyup(function(){
            var search_key = $("#search_key").val()
            var search_list = []
            for (i = 0 ; i < data.length; i++)
            {
                var flag = false
                var info = data[i]
                if (info.coin_type.includes(search_key)) {
                    flag = true
                }
                if (flag)
                {
                    search_list.push(info)
                }
            }
            init_temp_data(search_list)
        });
    }

    // 重新初始化事件
    function init_tab_click()
    {
        //  tab切换
        $('#tab-ul li').click(function(){
            $("#search_key").val("")
            var list = ['self','all', 'bitcny', 'btc', 'eth', 'usdt' ]
            var index = $(this).index();
            $(this).addClass('tab-active').siblings('li').removeClass('tab-active');
            $(this).parents('.tab').find('.tab-content .tab-item').eq(index).addClass('tab-itemActive').siblings('.tab-item').removeClass('tab-itemActive');
            // 切换就重新初始化
            get_curr_market(list[index])
        });

        // 点击变星星
        $('.tab-content .tab-line-nei .tab-img').click(function(){
            $(this).removeClass('tab-imgActive').siblings('.tab-img').addClass('tab-imgActive');
        });

        $('.tab-content .tab-line-nei').click(function() {
            // alert($(this).data('id'));
            window.location.href="{%url 'trade'%}?type=" + $(this).data('id');
        });


        // 点击排序
        $('.tab-line-one .tab-icon .btnOne').click(function(){
            var that = this;
           var flag = $(that).find('img').eq(0).css("opacity");
            if(flag != 0){
                $(this).find('img').eq(0).removeClass('btnOneActive');
                $(this).find('img').eq(1).addClass('btnOneActive');
            }else{
                $(this).find('img').eq(1).removeClass('btnOneActive');
                $(this).find('img').eq(0).addClass('btnOneActive');
            }
        });

//        // 搜索
//        $('#search .search').click(function(){
//            alert(1212)
//        })
    }

    function markets_left_pack_data(jsonobj, use_coin_type)
    {
        // todo order by use_coin_type
        var data = []
        for (i = 0; i < jsonobj.length; i++)
        {
            var info = jsonobj[i];
            if (use_coin_type && use_coin_type.length > 0)
            {
                if (use_coin_type != 'all')
                {
                    if (use_coin_type != info.use_coin_type)
                    {
                        continue
                    }
                }
            }
            var key = info.coin_type + "2" +'bitcny'
            if (!g_markets[key])
            {
                console.log("================ " + key)
                continue
            }
            var list = []
            var tofixed = coin_tofixed(info.use_coin_type)

            var icon_img = g_coin_info[info.coin_type].icon_img

            var percent = 0
            if (info.curr != info.open)
            {
                percent = (info.curr - info.open) * 100 / info.open
                tofixed = coin_tofixed(info.use_coin_type)
                percent = floor_number(percent, tofixed)
            }
            percent_html = "<span class=\"green\">0.00%</span>"
            if (percent > 0) {
            }
            else {
            }

            var tofixed0 = coin_tofixed(info.coin_type)
            var tofixed1 = coin_tofixed(info.use_coin_type)

            var curr = info.curr.toFixed(tofixed1)
            var volume = info.volume * info.curr
            volume = volume.toFixed(tofixed1)

            var heigh= info.high.toFixed(tofixed1)
            var low = info.low.toFixed(tofixed1)
            curr = Calculate.CommaFormattedOnly(curr)

            var high = Calculate.CommaFormattedOnly(high)
            var low = Calculate.CommaFormattedOnly(low)
            volume = Calculate.CommaFormattedOnly(volume)

            var  td_pair = info.coin_type + "2" + info.use_coin_type
            var  td1 = ""
            var  td2 = g_coin_info[info.coin_type].name_upper + "/<span class='tab-span-name'>" + g_coin_info[info.use_coin_type].name_upper + "</span>"
            var  td3 = curr
            if (info.arrow == 1)
            {
                td3 = "<span class=\"tab-pink\">" + curr + "<i class=\"fa fa-arrow-up red\" ></i>" + "</span>"
            }
            if (info.arrow == 2)
            {
                td3 = "<span class=\"tab-green\">" + curr + "<i class=\"fa fa-arrow-down green\" ></i>" + "</span>"
            }

            var td4 = "<span class=\"tab-green\">0.00%</span>"
            if (percent > 0) {
                td4 = "<span class=\"tab-pink f-right\">+"+percent+"%</span>"
            }
            else {
                td4 = "<span class=\"tab-green f-right\">"+percent+"%</span>"
            }
            //var td7="<a href=\"{%url 'trade'%}?type=" + info.coin_type + "2" + info.use_coin_type + "\" class=\"btn btn-block btn-success\">{% trans '马上交易'%}</a>"
            var  td5 = heigh
            var  td6 = low
            var  td7 = volume
            list.push(td1)
            list.push(td2)
            list.push(td3)
            list.push(td4)
            list.push(td5)
            list.push(td6)
            list.push(td7)
            list.push(td_pair)
            data.push(list)
        }
        return data
    }

</script>
<script id="temp_market_index" type="text/html">
        <!--  选项卡 -->
            <!-- 内容 -->
            <div class="tab-content">
                <div class="tab-item tab-itemActive">


                    <div class="tab-line-one tab-line">
                        <div class="tab-icon">
                            <img class="tab-imgActive" src="/static/home_page/img/xing.png" alt="">
                            <img class="tab-img" src="/static/home_page/img/xing2.png" alt="">
                        </div>
                        <div class="tab-icon">
                            <span class="tab-span">{% trans '市场' %}
                                <span class="btnOne">
                                    <img class="btnOneActive" src="/static/home_page/img/btn2.png" alt="">
                                    <img src="/static/home_page/img/btn3.png" alt="">
                                </span>
                            </span>
                        </div>
                        <div class="tab-icon">
                            <span class="tab-span">{% trans '最新价' %}
                                <span class="btnOne">
                                    <img src="/static/home_page/img/btn2.png" alt="">
                                    <img src="/static/home_page/img/btn3.png" alt="">
                                </span>
                            </span>
                        </div>
                        <div class="tab-icon">
                            <span class="tab-span">{% trans '24H涨跌' %}
                                <span class="btnOne">
                                    <img src="/static/home_page/img/btn2.png" alt="">
                                    <img src="/static/home_page/img/btn3.png" alt="">
                                </span>
                            </span>
                        </div>
                        <div class="tab-icon">
                            <span class="tab-span">{% trans '24H最高价' %}
                                <span class="btnOne">
                                    <img src="/static/home_page/img/btn2.png" alt="">
                                    <img src="/static/home_page/img/btn3.png" alt="">
                                </span>
                            </span>
                        </div>
                        <div class="tab-icon">
                            <span class="tab-span">{% trans '24H最低价' %}
                                <span class="btnOne">
                                    <img src="/static/home_page/img/btn2.png" alt="">
                                    <img src="/static/home_page/img/btn3.png" alt="">
                                </span>
                            </span>
                        </div>
                        <div class="tab-icon">
                            <span class="tab-span tab-span-last">{% trans '24H成交额' %}
                                <span class="btnOne">
                                    <img src="/static/home_page/img/btn2.png" alt="">
                                    <img src="/static/home_page/img/btn3.png" alt="">
                                </span>
                            </span>
                        </div>
                    </div>
                <%   for(i = 0; i < jsonobj.length; i++){ %>
                <%       var info = jsonobj[i];           %>
                <%       var pair = info[7]%>

                        <div class="tab-line tab-line-nei" data-id="<%=pair%>">
                            <div class="tab-icon">
                                <img class="tab-img tab-imgActive" src="/static/home_page/img/xing.png" alt="">
                                <img class="tab-img" src="/static/home_page/img/xing2.png" alt="">
                            </div>
                            <div class="tab-icon">
                                <span class="tab-span"><%-info[1]%></span>
                            </div>
                            <div class="tab-icon">
                                <span class="tab-span"><%-info[2]%></span>
                            </div>
                            <div class="tab-icon">
                                <span class="tab-span"><%-info[3]%></span>
                            </div>
                            <div class="tab-icon">
                                <span class="tab-span"><%-info[4]%></span>
                            </div>
                            <div class="tab-icon">
                                <span class="tab-span"><%-info[5]%></span>
                            </div>
                            <div class="tab-icon">
                                <span class="tab-span tab-span-last"><%-info[6]%></span>
                            </div>
                        </div>
                <%       }     %>
                </div>
            </div>
        </div>
</script>
